<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
    <link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicon.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title></title>

    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />


    <!-- Bootstrap core CSS     -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Animation library for notifications   -->
    <link href="assets/css/animate.min.css" rel="stylesheet" />

    <!--  Paper Dashboard core CSS    -->
    <link href="assets/css/paper-dashboard.css" rel="stylesheet" />

    <!--  CSS for Demo Purpose, don't include it in your project     -->
    <link href="assets/css/demo.css" rel="stylesheet" />

    <!--  Fonts and icons     -->
    <!-- <link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'> -->
    <link href="assets/css/themify-icons.css" rel="stylesheet">
</head>

<body>

<div class="wrapper" id="app">
    <div class="sidebar" data-background-color="white" data-active-color="danger">

        <!--
    Tip 1: you can change the color of the sidebar's background using: data-background-color="white | black"
    Tip 2: you can change the color of the active button using the data-active-color="primary | info | success | warning | danger"
-->

        <div class="sidebar-wrapper">
            <div class="logo">
                <a href="#" class="simple-text">
                    宠物商品商店后台管理系统
                </a>
            </div>

            <ul class="nav">
                <li class="active" v-if="role===0||role===2">
                    <a href="user.html">
                        <i class="ti-user"></i>
                        <p>用户管理</p>
                    </a>
                </li>
                <li v-if="role===0">
                    <a href="goods.html">
                        <i class="ti-shopping-cart-full"></i>
                        <p>商品管理</p>
                    </a>
                </li>
                <li v-if="role===0||role===1">
                    <a href="stock.html">
                        <i class="ti-truck"></i>
                        <p>商品库存管理</p>
                    </a>
                </li>
                <li v-if="role===0">
                    <a href="bill.html">
                        <i class="ti-clipboard"></i>
                        <p>账单管理</p>
                    </a>
                </li>
                <li v-if="role===0||role===2">
                    <a href="orders.html">
                        <i class="ti-file"></i>
                        <p>订单管理</p>
                    </a>
                </li>
                <li v-if="role===0||role===2">
                    <a href="message.html">
                        <i class="ti-comments"></i>
                        <p>留言管理</p>
                    </a>
                </li>
                <li>
                    <a href="../login.html">
                        <i class="ti-settings"></i>
                        <p>退出登录</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="main-panel">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">用户管理</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">
                                <i class="ti-user"></i>
                                <p>{{userName}}</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>


        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="header">
                                <h4 class="title">用户列表</h4>
                            </div>
                            <div style="margin: 10px;">
                                <button class="btn btn-success" data-toggle="modal" data-target="#insert" style="float: right;">新增</button>
                                <form action="*" onsubmit="return false">
                                    <div class="nav-search">
                                        <div class="input-group">
                                            <input type="text" class="form-control" v-model="account" style="float: left;width: 200px;margin-right: 5px;" placeholder="请输入...">
                                            <button class="btn btn-info" @click="getList">搜索</button>
                                            <button class="btn btn-info" @click="reset">重置</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="content table-responsive table-full-width" style="height: 800px;overflow-y: scroll;">
                                <table class="table table-striped">
                                    <thead>
                                    <th>ID</th>
                                    <th>账号</th>
                                    <th>密码</th>
                                    <th>角色</th>
                                    <th>姓名</th>
                                    <th>手机号</th>
                                    <th>是否VIP</th>
<!--                                    <th>余额</th>-->
<!--                                    <th>地址</th>-->
                                    <th>操作</th>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(item,index) in selectList" :key="index">
                                        <td>{{item.id}}</td>
                                        <td>{{item.account}}</td>
                                        <td>{{item.passwd}}</td>
                                        <td v-if="item.role===0">管理员</td>
                                        <td v-if="item.role===1">采购员</td>
                                        <td v-if="item.role===2">员工</td>
                                        <td v-if="item.role===3">用户</td>
                                        <td>{{item.userName}}</td>
                                        <td>{{item.iphone}}</td>
                                        <td >{{item.vip === '1'?'是':'否'}}</td>
<!--                                        <td>{{item.money}}</td>-->
<!--                                        <td>{{item.address}}</td>-->
                                        <td>
                                            <a style="cursor: pointer;color: #EB5E28;" data-toggle="modal" data-target="#edit" @click="edit(item.id)">编辑</a>
                                            <a style="cursor: pointer;color: red;" @click="del(item.id)">删除</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="insert" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="padding: 30px;">
                <div>
                    <div class="card-body">
                        <h4 class="card-title">新增</h4>
                        <form class="forms-sample">
                            <div class="form-group">
                                <label>账号</label>
                                <input type="text" v-model="insertForm.account" class="form-control" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" v-model="insertForm.passwd" class="form-control" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>姓名</label>
                                <input type="text" v-model="insertForm.name" class="form-control" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>手机号</label>
                                <input type="text" v-model="insertForm.phone" class="form-control" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>地址</label>
                                <input type="text" v-model="insertForm.address" class="form-control" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>角色</label>
                                <select v-model="insertForm.role" class="form-control" placeholder="请输入">
                                    <option value="0">管理员</option>
                                    <option value="1">采购员</option>
                                    <option value="2">员工</option>
                                    <option value="3">用户</option>
                                </select>
                            </div>
<!--                            <div class="form-group">-->
<!--                                <label>是否VIP</label>-->
<!--                                <select v-model="insertForm.vip" class="form-control" placeholder="请输入">-->
<!--                                    <option value="1">是</option>-->
<!--                                    <option value="0">否</option>-->
<!--                                </select>-->
<!--                            </div>-->
                            <div class="form-group">
                                <label>余额</label>
                                <input type="text" v-model="insertForm.money" class="form-control" placeholder="请输入">
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-sm btn-default" type="button" data-dismiss="modal">关闭</button>
                    <button class="js-notify btn btn-sm btn-app" data-notify-type="success" data-notify-align="center"
                            data-notify-message="新增成功！" type="button" data-dismiss="modal" @click="insert">确认</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <!-- Modal -->
    <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="padding: 30px;">
                <div>
                    <div class="card-body">
                        <h4 class="card-title">修改</h4>
                        <form class="forms-sample">
                            <div class="form-group" style="display: none">
                                <label>ID</label>
                                <input type="text" v-model="editForm.id" class="form-control" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>账号</label>
                                <input type="text" v-model="editForm.account" class="form-control" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" v-model="editForm.passwd" class="form-control" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>姓名</label>
                                <input type="text" v-model="editForm.name" class="form-control" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>手机号</label>
                                <input type="text" v-model="editForm.phone" class="form-control" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>地址</label>
                                <input type="text" v-model="editForm.address" class="form-control" placeholder="请输入">
                            </div>
                            <div class="form-group">
                                <label>角色</label>
                                <select v-model="editForm.role" class="form-control" placeholder="请输入">
                                    <option value="0">管理员</option>
                                    <option value="1">采购员</option>
                                    <option value="2">员工</option>
                                    <option value="3">用户</option>
                                </select>
                            </div>
<!--                            <div class="form-group">-->
<!--                                <label>是否VIP</label>-->
<!--                                <select v-model="editForm.vip" class="form-control" placeholder="请输入">-->
<!--                                    <option value="1">是</option>-->
<!--                                    <option value="0">否</option>-->
<!--                                </select>-->
<!--                            </div>-->
                            <div class="form-group">
                                <label>余额</label>
                                <input type="text" v-model="editForm.money" class="form-control" placeholder="请输入">
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-sm btn-default" type="button" data-dismiss="modal">关闭</button>
                    <button class="js-notify btn btn-sm btn-app" data-notify-type="success" data-notify-align="center"
                            data-notify-message="修改成功！" type="button" data-dismiss="modal" @click="update">确认</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
</div>
</body>
<script src="assets/js/vue.min.js"></script>
<!--   Core JS Files   -->
<script src="assets/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>

<!--  Checkbox, Radio & Switch Plugins -->
<script src="assets/js/bootstrap-checkbox-radio.js"></script>

<!--  Charts Plugin -->
<script src="assets/js/chartist.min.js"></script>

<!--  Notifications Plugin    -->
<script src="assets/js/bootstrap-notify.js"></script>

<!--  Google Maps Plugin    -->
<!---<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>--->

<!-- Paper Dashboard Core javascript and methods for Demo purpose -->
<script src="assets/js/paper-dashboard.js"></script>

<!-- Paper Dashboard DEMO methods, don't include it in your project! -->
<script src="assets/js/demo.js"></script>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                userName:'',
                role:'',
                selectList:[],
                page:1,
                size:9999999,
                account:'',
                insertForm:{
                    account:'',
                    passwd:'',
                    address:'',
                    role:'',
                    name:'',
                    phone:'',
                    // vip:'',
                    money:''
                },
                editForm:{
                    id:null,
                    account:'',
                    passwd:'',
                    address:'',
                    name:'',
                    phone:'',
                    role:null,
                    // vip:'',
                    money:null
                }
            }
        },
        mounted() {
            var userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
            if(userInfo=="" || userInfo==null){
                alert("您还没有登录，请先登录后在进行操作！");
                window.location.href = '../login.html'
            };
            this.userName = userInfo.account
            this.role = userInfo.role
            this.getList()
        },
        methods: {
            getList(){
                const that = this
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    url: "/userInfo/queryByPage",
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "size": that.size,
                        "page": that.page,
                        "account": that.account
                    }),
                    success: function (data) {
                        that.selectList = data.data.list
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
            insert(){
                const that = this
                var password= /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
                if(that.insertForm.phone.length == 11){
                    if(password.test(that.insertForm.passwd)){
                        $.ajax({
                            //几个参数需要注意一下
                            type: "POST", //方法类型
                            dataType: "json", //预期服务器返回的数据类型
                            contentType: 'application/json',
                            url: "/userInfo/add",
                            data: JSON.stringify({
                                account: that.insertForm.account,
                                address: that.insertForm.address,
                                money: that.insertForm.money,
                                passwd: that.insertForm.passwd,
                                iphone: that.insertForm.phone,
                                userName: that.insertForm.name,
                                role: that.insertForm.role
                            }),
                            success: function (data) {
                                that.getList()
                                that.insertForm.account = ''
                                that.insertForm.address = ''
                                that.insertForm.money = null
                                that.insertForm.userName = ''
                                that.insertForm.phone = ''
                                that.insertForm.passwd = ''
                                that.insertForm.role = null
                            },
                            error: function () {
                                alert("异常！");
                            }
                        });
                    }else {
                        alert("密码必须由6-12位数字加字母组成！");
                    }
                }else{
                    alert("请输入11位的手机号！");
                }
            },
            edit(id){
                const that = this
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST", //方法类型
                    dataType: "json", //预期服务器返回的数据类型
                    contentType: 'application/json',
                    url: "/userInfo/queryById",
                    data: JSON.stringify({
                        id: id
                    }),
                    success: function (data) {
                        that.editForm = data
                        that.editForm.name = data.userName
                        that.editForm.phone = data.iphone
                    },
                    error: function () {
                        alert("异常！");
                    }
                });
            },
            update(){
                const that = this
                var password= /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
                if(that.editForm.phone.length == 11){
                    if(password.test(that.editForm.passwd)){
                        $.ajax({
                            //几个参数需要注意一下
                            type: "POST", //方法类型
                            dataType: "json", //预期服务器返回的数据类型
                            contentType: 'application/json',
                            url: "/userInfo/edit",
                            data: JSON.stringify({
                                id:that.editForm.id,
                                account: that.editForm.account,
                                address: that.editForm.address,
                                money: that.editForm.money,
                                passwd: that.editForm.passwd,
                                iphone: that.editForm.phone,
                                userName: that.editForm.name,
                                role: that.editForm.role
                            }),
                            success: function (data) {
                                that.getList()
                            },
                            error: function () {
                                alert("异常！");
                            }
                        });
                    }else {
                        alert("密码必须由6-12位数字加字母组成！");
                    }
                }else {
                    alert("请输入11位的手机号！");
                }
            },
            del(id){
                const that = this
                if (confirm("确定要删除吗?")) {
                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST", //方法类型
                        dataType: "json", //预期服务器返回的数据类型
                        contentType: 'application/json',
                        url: "/userInfo/deleteById",
                        data: JSON.stringify({
                            id:id
                        }),
                        success: function (data) {
                            alert("删除成功！");
                            that.getList()
                        },
                        error: function () {
                            alert("异常！");
                        }
                    });
                }
            },
            reset(){
                this.account = ''
            }
        }
    })
</script>
</html>
